import React, { useState, useEffect } from "react";
import { Button, Tabs, Empty } from "react-vant";
import axios from "../../utils/request";
import { useNavigate } from "react-router-dom";
type Props = {};

const Order = (props: Props) => {
  const navigate = useNavigate();
  const [orderList, setOrderList] = useState([]);
  const [orderChildren, setOrderChildren] = useState([]);
  const [orderChildren1, setOrderChildren1] = useState([]);
  useEffect(() => {
    (async () => {
      let res = await axios.get("/order");
      setOrderList(res.data);
    })();
    (async () => {
      let res = await axios.get("/orderchildren");
      setOrderChildren(res.data);
      setOrderChildren1(res.data);
    })();
  }, []);
  const [i, setI]: any = useState("0");
  //tabs点击
  const change = (e: any) => {
    setI(e);
  };
  //深度监听 i 通过tabs点击的下标不同判断返回的数据
  useEffect(() => {
    if (i == 0) {
      setOrderChildren(orderChildren1);
    } else if (i == 1) {
      //待出行
      let arr = orderChildren1.filter((item: any) => {
        return item.status === "出票成功";
      });
      setOrderChildren(arr);
    } else if (i == 2) {
      //待支付
      let arr = orderChildren1.filter((item: any) => {
        return item.status === "待支付";
      });
      setOrderChildren(arr);
    } else if (i == 3) {
      //退款/已取消
      let arr = orderChildren1.filter((item: any) => {
        return item.status === "退款成功" || item.status === "已取消";
      });
      setOrderChildren(arr);
    }
  }, [i]);

  //删除订单
  const btndel = (e: any, id: any) => {
    e.stopPropagation();
    (async () => {
      let res = await axios.delete(`/delorderchildren/${id}`);
      console.log(res.data);
      setOrderChildren(res.data);
      setOrderChildren1(res.data);
    })();
  };
  const btn = (item: any) => {
    if (item.status === "出票成功") {
      navigate("/success", { state: item });
    } else if (item.status === "待支付") {
      navigate("/payment", { state: item });
    } else if (item.status === "已取消" || item.status === "退款成功") {
      navigate("/cancel", { state: item });
    }
  };
  return (
    <div className="order">
      <header>
        <p>全部订单</p>
        <div>
          <Tabs onChange={change} defaultActive={0}>
            {orderList.map((item: any, index) => (
              <Tabs.TabPane key={index} title={item.title}></Tabs.TabPane>
            ))}
          </Tabs>
        </div>
      </header>
      <main>
        <div style={{ width: "100px", height: "20px" }}></div>
        {orderChildren.length > 0 ? (
          orderChildren.map((j: any, k: any) => {
            return (
              <div onClick={() => btn(j)} key={k} className="order_box">
                <div className="zuo">
                  <h4>{j.title}</h4>
                  <p>
                    {j.train}
                    &emsp;
                    {j.name}
                  </p>
                  <span>{j.date}</span>
                </div>
                <div className="you">
                  <span style={{ color: "orange", fontWeight: "800" }}>
                    ￥{j.price}
                  </span>
                  <span
                    className={j.status === "出票成功" ? "on" : ""}
                    style={{
                      color: j.status === "待支付" ? "red" : "",
                      fontSize: "12px",
                    }}
                  >
                    {j.status}
                  </span>
                  <Button onClick={(e) => btndel(e, j.id)} size="mini" round>
                    删除订单
                  </Button>
                </div>
              </div>
            );
          })
        ) : (
          <Empty description="暂无订单" />
        )}
      </main>
    </div>
  );
};

export default Order;
